<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
  const myMixin = {
    data(){
      return {
        number: 1,
        counter: 22
      }
    },
    created(){
      console.log('created')
    }
  }
  const app = Vue.createApp({
    template: `
    {{number}},{{counter}}
    `,
    // 混入级别低，组件data、methods 高于mixin data、methods 优先级
    // 声明周期函数，先执行mixins，再执行组件里面的
    mixins: [myMixin],
    data(){
      return{number: 3}
    },
    created() {
      console.log('app')
    }
  })
  app.mixins({
    data(){
      return {number: 333}
    }
  })
  app.mount('#root');
</script>
</html>